<template>
  <div class="Bar">
    <div class="barchart">
        <BarChart :chart-data="chartdata" :options="options" :height='600' />
    </div>
    <div class="el-main-table">

        <el-select v-model="choseBK" size="small" @change="choseBKChange" placeholder="请选择" class="el-bk-select">
          <el-option
            v-for="item in selectLabels"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            <span style="float: left; color: #8492a6; font-size: 10px">{{ item.label }}</span>
          </el-option>
        </el-select>
        <el-date-picker
          v-model="selectDate"
          size="small" 
          type="date"
          @change="didSelectDate"
          value-format="yyyyMMdd" 
          placeholder="选择日期"
          class="el-date-select">
        </el-date-picker>
        <el-table :data="tableData" 
          v-loading=loading 
          height=81%
          :header-cell-style='headerStyle'
          :row-style='rowStyle'
          @row-click="handleSeleUserId">
              <el-table-column v-for="(key,index) in sourceKey" :key="index" width="90" text-align=center>
                  <template slot="header">{{key_names[key]['name']}}</template>
                  <template slot-scope="scope">
                    <div>{{tableData[scope.$index][key]}}</div>
                  </template>
              </el-table-column>
        </el-table>
        <el-pagination
          background      
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10]"
          :page-size="pagesize"
          layout="total,jumper,prev, pager, next,sizes"
          :total="files_count">
        </el-pagination>
    </div>
  </div>
</template>

<script>

import BarChart from "./BarChart.vue";
import json_data from '../Utils/api.js';
let {localData,key_names } = json_data()

let sourceKey=["name","close","jijin_ORG","hk_ORG","list_date_days","hy","hy2"]
export default {
  name: "BarRPS",
  components: {
    BarChart,
  },
  props:{
    highType:String
  },
  data() {
    return {
      highKey:"t_20_high",
      fileJson:Object,
      chartdata:null,
      options:null,
      tableData: [],
      loading:true,
      choseBK:"",
      choseBKData:[],
      currentPage:0,
      pagesize:10,
      files_count:10,
      key_names:[],
      selectDate:'',
      sourceKey:[],
      selectLabels:[],
      allValueDate:[],
      headerStyle:{
          'font-weight':'bold',
          'font-size':'12px',
          'color':'#333333',
          'height':'40px'
      },
      rowStyle:{
          'font-weight':'normal',
          'font-size':'10px',
          'height':'40px'
      }
    }
  },
  created() {
  },
  beforeMount() {
    this.key_names = key_names
    this.sourceKey = sourceKey
    this.highKey="t_"+this.highType+"_high"
    this.fileJson=localData[this.highKey]
    this.allValueDate= Object.keys(this.fileJson).sort().reverse();
    let first_date=this.allValueDate[0]

    this.getUserInfo(first_date);
  },
  methods: {

    handleSizeChange:function(size){
        this.pagesize = size;
        this.hadleGetFilesListApi();
    },
    // 控制页面的切换
    handleCurrentChange: function(currentPage) {
        console.log("handleCurrentChange")
        this.currentPage = currentPage;
        this.hadleGetFilesListApi(currentPage-1);
    },
    
    didSelectDate(date){
        if (this.allValueDate.indexOf(date) == -1) {
           this.$message('未找到当天日期数据');
           return
        }
        console.log(date)
        this.getUserInfo(date);
    },
    choseBKChange(bk_label){
      this.loading = true
      this.choseBK=this.selectLabels[bk_label]['label']
      console.log(this.choseBK)
      this.fetchTableData(this.choseBK);
    },
    async getUserInfo(date) {
      this.selectDate=date
      let jsonO=this.fileJson[date]
      this.selectLabels=jsonO.select_labels
      this.choseBK=this.selectLabels[0]['label']
      this.chartdata=jsonO.chartdata
      this.options=jsonO.options
      this.fetchTableData(this.choseBK);
    },
    handleSeleUserId(a){
      console.log(a)
    },
  
    //对所有数据进行分页处理 发送请求
    hadleGetFilesListApi(page) {
       let start = page * this.pagesize;
       let end = start+this.pagesize
       this.tableData = self.choseBKData.slice(start,end);
    },


    async fetchTableData (bk) {
      let tableKey="t_"+this.highType+"_high_table"
      let jsonO=localData[tableKey][this.selectDate]
      let stocks=jsonO[bk]
      this.files_count = stocks.length
      self.choseBKData = stocks
      this.tableData = self.choseBKData.slice(0,this.pagesize);

      this.loading = false
    }
  }
}
</script>

<style>
.Bar{
  display:flex;
  height: 100%;
}
.barchart{
  margin-right: 10px;
  background-color: white;
  width: 50%;
}
.el-main-table{
  background-color: white;
  width: 50%;
  height: 100%; 

}
.el-pagination{
  margin-top: 20px;
}

.el-bk-select{
  margin-left: 10px;
  margin-right: 20px;
  padding: 0;
  font-size: 10px;
}

.el-date-select{
  color: #8492a6; 
  font-size: 12px;
}

</style>
